<template>
  <div class="smallVideo">
    <van-swipe
      style="height: 620px"
      vertical
      :show-indicators="false"
      :loop="false"
      @change="onChange"
    >
      <van-swipe-item v-for="(item, index) in shortVideoData" :key="index">
        <div class="header">
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-button type="primary">···</van-button>
            </template>
          </van-popover>
        </div>
        <div class="container">
          <!-- <video class="video-box" src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/fa8619bc387702293651185569/v.f42905.mp4" autoplay></video> -->
          <video
            class="video-box"
            id="sv"
            preload="auto"
            :src="item.video.url"
            ref="shortVideo"
            @click="playVideo"
            width="100%"
            height="620px"
          ></video>
          <!-- 视频封面 -->
          <!-- <img
            class="auto-img"
            :src="item.video.imgUrl"
            alt=""
          /> -->

          <!-- 播放和暂停按钮 -->
          <div
            class="controlPlay"
            ref="play"
            @click="playVideo"
            v-if="playIcon"
          >
            <van-icon name="play" size="32" />
            <!-- <van-icon name="pause" size="32" /> -->
          </div>

          <!-- 右侧 点赞，评论，分享 -->
          <div class="right-side">
            <div class="avatar-box">
              <div class="avatar">
                <img class="auto-img" :src="item.user.avatarurl" alt="" />
              </div>
              <div class="follow">+</div>
            </div>
            <div class="zan-box" @click="item.upCount += 1">
              <div class="zan-icon">
                <img class="auto-img" src="../assets/zan_icon.png" alt="" />
              </div>
              <div class="zan-num">{{ item.upCount }}</div>
            </div>
            <div class="comment-box" @click="showPopup">
              <div class="comment-icon">
                <img class="auto-img" src="../assets/comment_icon.png" alt="" />
              </div>
              <div class="comment-txt">评论</div>
            </div>
            <div class="share-box" @click="showShare = true">
              <div class="share-icon">
                <img class="auto-img" src="../assets/share_icon.png" alt="" />
              </div>
              <div class="share-txt">分享</div>
            </div>
          </div>

          <!-- 底部视频描述 -->
          <div class="bottom-mask"></div>
          <div class="video-desc">
            <div class="nickname one-text">@{{ item.user.nickName }}</div>
            <div class="desc-txt two-text">
              {{ item.title }}
            </div>
          </div>
        </div>
      </van-swipe-item>
      <!-- <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item> -->
    </van-swipe>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelectShare"
    />

    <div class="comment-pop">
      <van-popup
        v-model="showPop"
        position="bottom"
        :style="{ height: '70%' }"
        closeable
        round
      >
        <div class="title">评论</div>

        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="天了噜，没有找到相关内容。"
        />

        <div class="bottom">
          <van-cell-group>
            <van-field class="input" v-model="value" placeholder="写评论..." />
          </van-cell-group>
          <button class="send-btn">发送</button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import videojs from "video.js";
export default {
  name: "SmallVideo",
  data() {
    return {
      showPopover: false,
      show: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "举报", className: "jubao" }],

      // 获取小视频数据
      shortVideoData: [],
      playIcon: true,
      playOrPause: true,
      video: null,
      current: 0,
      isZan:false,
      zanNum: "",
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      showPop: false,
      value: "",
    };
  },
  created() {
    this.getShortData();
  },
  methods: {
    // showPopup(){
    onSelect() {
      this.show = false;
    },
    onSelectShare() {
      Toast(option.name);
      this.showShare = false;
    },
    getShortData() {
      let offset = 0;

      this.axios({
        methods: "get",
        url: `/video/short/${10 * offset}`,
        // url: "/video/short/0",
      })
        .then((result) => {
          
          // if ((result.data.success = true)) {
          this.shortVideoData = result.data.data.feeds;

          // }
        })
        .catch((err) => {});
    },

    // 点击播放视频
    playVideo() {
      //

      let video = document.querySelectorAll("video")[this.current];

      if (this.playOrPause) {
        video.play();
        this.playIcon = false;
      } else {
        video.pause();
        this.playIcon = true;
      }

      this.playOrPause = !this.playOrPause;
    },

    // 上下滑动改变播放的视频
    onChange(index) {
      // 滑到其它视频时，暂停当前播放的视频
      let video = document.querySelectorAll("video")[this.current];
      video.pause();

      this.playOrPause = true;
      this.current = index;

      this.playIcon = true;
    },
    // 点赞
    clickZan() {
      // this.zanNum +1;
    },
    showPopup() {
      this.showPop = true;
    },
  },
};
</script>

<style lang="less" scoped>
.smallVideo {
  height: 620px;
  background-color: rgba(0, 0, 0, 0.9);
  margin-bottom: 50px;
  position: relative;
}
.van-swipe-item {
  height: 100%;
  // border: 1px solid red;
  color: #fff;
  position: relative;
}

.header {
  // width: 80px;
  // height: 40px;
  // background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
  .van-popover__wrapper {
    // border: 1px solid red;

    .van-button {
      height: 40px;
      background-color: transparent;
      border: none;
    }
    /deep/ .van-button--normal {
      padding-top: 7px;
      font-size: 26px;
    }
  }
}
.container {
  // border: 1px solid red;
  // position: relative;
  // position: absolute;
  // top: 50%;
  .video-box {
    width: 100%;
  }
  .controlPlay {
    background-color: rgba(0, 0, 0, 0.45);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .right-side {
    // border: 1px solid #00f;
    position: absolute;
    right: 12px;
    bottom: 22px;
    width: 50px;
    z-index: 99;
    .avatar-box {
      // border: 1px solid #0f0;
      position: relative;
      margin-bottom: 36px;
      .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: #ccc;
        overflow: hidden;
      }
      .follow {
        background-color: #dd403b;
        color: #fff;
        font-size: 26px;
        width: 36px;
        height: 23px;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 6px;
        bottom: -11px;
      }
    }
    .zan-box,
    .comment-box,
    .share-box {
      // border: 1px solid #0f0;
      margin-bottom: 14px;
      .zan-icon,
      .comment-icon,
      .share-icon {
        width: 48px;
        height: 48px;
        background-color: rgba(0, 0, 0, 0.42);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 22px;
        }
      }
      .zan-num,
      .comment-txt,
      .share-txt {
        font-size: 14px;
        color: #fff;
        text-align: center;
        padding-top: 5px;
      }
    }
    .share-box {
      margin-bottom: 0;
    }
  }

  .bottom-mask {
    width: 100%;
    height: 182px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  }
  .video-desc {
    // border: 1px solid #000;
    position: absolute;
    left: 12px;
    bottom: 22px;
    width: calc(100% - 100px);
    text-align: left;
    .nickname {
      font-size: 19px;
      color: #fff;
    }
    .desc-txt {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}

// .video-box {
//   // border: 1px solid #00f;
//   height: 610px;
//   img {
//     height: 100%;
//   }
// }
</style>

<style lang="less">
.jubao {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0px 4px;
  height: 30px;
  width: 55px;
  color: #fff;
}

.comment-pop {
  position: relative;
  .title {
    // border: 1px solid #000;
    font-size: 18px;
    padding: 14px;
    border-bottom: 1px solid #eee;
  }
  .van-empty {
    // border: 1px solid #000;
    margin-top: 30px;
  }
  .custom-image .van-empty__image {
    width: 100px;
    height: 100px;
  }
  .bottom{
    position: absolute;
    bottom: 0;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .input{
      width: 260px;
      background-color: #f0f0f0;
      color: #fff;
      border-radius: 20px;
    }
    .send-btn{
      width: 60px;
      height: 36px;
      background-color: #dd403b;
      color: #fff;
      font-size: 14px;
      border-radius: 10px;
      margin-left: 18px;
    }
  }
}
</style>